<ui:composition xmlns="http://www.w3.org/1999/xhtml"
			    xmlns:ui="http://java.sun.com/jsf/facelets"
			    xmlns:h="http://java.sun.com/jsf/html"
			    xmlns:f="http://java.sun.com/jsf/core"
			    xmlns:rich="http://richfaces.org/rich"
			    template="/WEB-INF/layout/template.xhtml">
	
	<ui:define name="title">
		<h:outputText value="#{i18n['upload.title']}"/>
	</ui:define>

	<ui:define name="contents">
		<h1><h:outputText value="#{i18n['upload.heading']}"/></h1>
		
		<h:form id="uploadForm">
			<h:panelGrid columns="2" columnClasses="kundendetailsBezeichner,kundendetailsDaten">
				<h:outputLabel id="idLabel"
				               value="#{i18n['upload.id.prompt']}"
				               for="id"/>
				<h:inputText id="id" value="#{kv.uploadId}" required="true">
					<f:converter converterId="javax.faces.Long"/>
					<f:validateLongRange minimum="1"/>
				</h:inputText>

				<h:outputLabel id="dateiLabel"
				               value="#{i18n['upload.datei.prompt']}"
				               for="datei"
				               styleClass="kundendetailsBezeichner"/>
				<rich:fileUpload id="datei"
						         fileUploadListener="#{kv.uploadListener}" 
						         maxFilesQuantity="1"
						         acceptedTypes="gif, jpg, jpeg, png"
						         listHeight="63px"
						         immediateUpload="true">
					<f:facet name="label">
						<h:outputText value="#{i18n['upload.progressBar.label']}"/>
					</f:facet>
				</rich:fileUpload>
			</h:panelGrid>
			
			<rich:jQuery selector="#id" query="focus()"/>
			<rich:messages errorClass="error" warnClass="warn">
				<f:facet name="errorMarker">
					<h:graphicImage url="/images/error.gif"/>
				</f:facet>
			</rich:messages>

			<p>
				<h:commandButton id="uploadSubmit" action="#{kv.upload}" value="#{i18n['upload.submit']}"/>
				&#160;&#160;&#160;
				<h:commandButton id="uploadReset" action="#{kv.uploadReset}" value="#{i18n['upload.reset']}"/>
			</p>
		</h:form>
	</ui:define>
</ui:composition>
